<!-- 通用CSS -->
<head th:fragment=header(title) >
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title th:text="${title}"></title>
    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/front/css/mui.css}" rel="stylesheet"/>
    <link th:href="@{/front/fonts/iconfont.css}" rel="stylesheet"/>
    <!-- bootstrap-table 表格插件样式 -->
    <link th:href="@{/front/swiper/swiper.min.css}" rel="stylesheet"/>
    <link th:href="@{/front/css/style.css}" rel="stylesheet"/>
    <!--  底部菜单样式  -->
    <style type="text/css">
        .mui-tab-item i{
            display: block;
            font-size: 25px;
            margin-top: 3px;
            line-height: normal;
        }
        .mui-tab-label{
            font-size: 12px;
        }
        .mui-bar-tab{
            -webkit-box-shadow: none;
            box-shadow: none;
            background-color: #343434;
        }
        .mui-bar-tab .mui-tab-item.mui-active{
            color: #fff;
        }
        .mui-bar-tab .mui-tab-item{
            color: #797979;
            width: 33%;
        }
    </style>

</head>
<base th:href="@{/}">
<!--通用js-->
<div th:fragment="footer">
    <script th:src="@{/front/js/jquery-1.11.3.min.js}"></script>
    <script th:src="@{/front/swiper/swiper.min.js}"></script>
    <script th:src="@{/front/js/mui.js}"></script>
    <script type="text/javascript">
        var ctx = '[[@{/}]]'
            console.log(ctx)
        var flag = false
        function showMask(){
            let mask = mui.createMask(callback);//callback为用户点击蒙版时自动执行的回调；
            mask.show();//显示遮罩
        }
        function closeMask(){
            flag = true
        }
        function callback(){
           return flag
        }
        // 移除高亮样式
        $(".mui-tab-item").removeClass("mui-active");
        var index1 = '[[${flag}]]';
        // 添加高亮样式
        $("#" + index1).addClass("mui-active");
    </script>
</div>
<!--上传js-->
<div th:fragment="common">
    <script th:src="@{/front/js/common.js}"></script>
</div>
<!--底部菜单-->
<div th:fragment="menu">
    <nav   class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active" id="index" href="toIndex">
            <i class="iconfont icon-shouye1"></i>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item" id="task" href="toTasks">
            <i class="iconfont icon-renwu4"></i>
            <span class="mui-tab-label">任务</span>
        </a>
        <a class="mui-tab-item" id="taskRecords" href="toTasksRecords/1">
            <i class="iconfont icon-renwu4"></i>
            <span class="mui-tab-label">任务订单</span>
        </a>
        <a class="mui-tab-item" id="mine" href="toMine">
            <i class="iconfont icon-icon03"></i>
            <span class="mui-tab-label">我的</span>
        </a>
    </nav>
</div>
